<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner 切换</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .banner {
            width: 100%;
            height: 33.33vh;
        }

        .img {
            width: 100%;
            height: 50%;
        }
        .button ul {
            position: absolute;
            bottom: 10px; 
            left: 50%;
            transform: translateX(-50%); 
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            margin: 0;
            background-color: rgba(0, 0, 0, 0.5); 
            border-radius: 20px;
        }

        .button ul li {
            list-style: none;
            margin: 0 10px;
        }

        button {
            width: 10px;
            height: 10px;
            border-radius: 20%;
            background-color: rg ba(255, 255, 255, 0.5); 
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button.active {
            background-color: rgb(73, 58, 58); 
        }

        button:hover {
            background-color: rgba(255, 255, 255, 0.8);
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="banner">

        <div class="img">
            <p v-html="imgscr"></p>
        </div>

        <div class="button">
            <ul>
                <li>
                    <button :class="{ active: current === 0 }" @click="changeImage(0)"></button>
                    <button :class="{ active: current === 1 }" @click="changeImage(1)"></button>
                    <button :class="{ active: current === 2 }" @click="changeImage(2)"></button>
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    const banner = Vue.createApp({
        data() {
            return {
                img: [
                    '<img src="./img/1.png" alt="1" style="width: 100%; height: 50%; object-fit: cover;">',
                    '<img src="./img/2.png" alt="2" style="width: 100%; height: 50%; object-fit: cover;">',
                    '<img src="./img/3.png" alt="3" style="width: 100%; height: 50%; object-fit: cover;">'
                ],
                imgscr: '<img src="./img/1.png" alt="1" style="width: 100%; height: 50%; object-fit: cover;">',
                current: 0 
            }
        },
        methods: {
            changeImage(id) {
                this.current = id; 
                this.imgscr = this.img[id]; 
            }
        }
    });
    banner.mount('#banner');
</script>

</html>